﻿<UserControl x:Class="JumpingBalls.Block"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="52" d:DesignWidth="52">
	<UserControl.Resources>
		<Storyboard x:Name="BallStoryBoard">
			<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ball">
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.85"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.1"/>
			</DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ball">
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.85"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.1"/>
			</DoubleAnimationUsingKeyFrames>
            <DoubleAnimation RepeatBehavior="Forever" Duration="0:0:0.5" To="0.8" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ball"/>
        </Storyboard>
        <Storyboard x:Name="BallEraseStoryBoard" FillBehavior="Stop">
			<DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ball" d:IsOptimized="True"/>
			<DoubleAnimation Duration="0:0:0.5" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ball" d:IsOptimized="True"/>
			<DoubleAnimation Duration="0:0:0.5" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ball" d:IsOptimized="True"/>
		</Storyboard>
	</UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Width="52" Height="52" Background="Black">
        <Border Width="52" Height="52" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="2" BorderBrush="#444444">
        	<Border.Background>
        		<RadialGradientBrush GradientOrigin="0,0" Center="0,0" RadiusY="2" RadiusX="2">
        			<GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#FFFFFF" Offset="0.3"/>
					<GradientStop Color="#EEEEEE" Offset="0.5"/>
                    <GradientStop Color="#BBBBBB" Offset="0.8"/>
        			<GradientStop Color="#999999" Offset="1"/>
        		</RadialGradientBrush>
        	</Border.Background>
            <Ellipse x:Name="ball" 
                     Width="40" 
                     Height="40" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Center" 
                     RenderTransformOrigin="0.5,0.5" >
                <Ellipse.RenderTransform>
                    <CompositeTransform/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
    </Grid>
</UserControl>
